import { twMerge } from 'tailwind-merge';
import { forwardRef } from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>{
}

/**
 * forwardRef 允许你的组件使用 ref 将一个 DOM 节点暴露给父组件。
 * const SomeComponent = forwardRef(render)
 * @params render 函数
 * 用法: 将 DOM 节点暴露给父组件 在多个组件中转发 ref 暴露一个命令式句柄而不是 DOM 节点
 */
const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
  // 默认的按钮样式
  className,
  //插槽
  children,
  // 按钮的类型
  type = "button",
  // 按钮的禁用
  disabled,
  // 剩余参数
  ...props
}, ref) => {
  return (
    <button
      type = {type}
      disabled = {disabled}
      ref = {ref}
      className = {twMerge(`
        w-full
        rounded-full
        bg-green-500
        border
        border-transparent
        px-3
        py-3
        disabled:cursor-not-allowed
        disabled:opacity-50
        text-black
        font-bold
        hover:opacity-75
        transition
      `, className)}
      {...props}
    >
      { children }
    </button>
  )
});
export default Button;